<template>
  <div id="login">
    <h1>后台管理系统</h1>

    <p>
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-s-check"
        v-model="input2"
        class="user"
      >
      </el-input>
    </p>
    <p>
      <el-input
        prefix-icon="el-icon-lock"
        placeholder="请输入密码"
        v-model="input"
        show-password
        class="user"
      ></el-input>
    </p>
    <p>
      <el-button type="primary">登录</el-button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      input2: "",
    };
  },
};
</script>

<style lang="less" scoped>
#login {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
  h1{
    margin-bottom: 10px;
    color: #fff;
  }
  background-color: pink;
  .user {
    width: 300px;
    margin-bottom: 10px;
    background-color: pink;
  }
  .el-button {
    width: 300px;
  }
  .el-input__inner {
    background-color: pink;
  }
}
</style>